<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据监视_配置watch属性实现</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			监视属性watch：
						1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
						2.监视的属性必须存在，才能进行监视！！
						3.监视的两种写法：
								(1).new Vue时传入watch配置
								(2).通过vm.$watch监视
			computed和watch之间的区别：
							1.只要是computed能完成的功能，watch都可以完成
							2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
			备注：watch就是Vue给我提供的一个监测数据改变的手段，至于数据发生改变后，要做什么，得看具体的业务了逻辑。
						例如：
								1.需要新的值、旧的值作比较，决定接下来要干什么
								2.无需得到修改后的值，只要数据改变了，就要发请求等等。
		-->

		<!-- 准备好一个容器-->
		<div id="root">
			<h1>名字：{{name}}</h1>
			<input type="text" placeholder="输入你的名字" v-model="name">
		</div>

		<script type="text/javascript" >
			const vm = new Vue({
				el:'#root',
				data:{
					name:'佩奇'
				},
				watch:{ //watch所监视的属性，一定是存在的属性

					//监视name属性---完整写法
					/* name:{
						immediate:true, //初始化时也会调用一次handler
						handler(newValue,oldValue){
							console.log('有人修改name的值了',newValue,oldValue)
						}
					} */

					//监视name属性---精简写法
					name(newValue,oldValue){
						console.log('有人修改name的值了',newValue,oldValue)
					}

				}
			})
		</script>
	</body>
</html>